// theme.js
import { blueTheme, darkTheme, greenTheme, vermilionTheme } from "./variable";
import cssVars from "css-vars-ponyfill";

// 返回主题配色
export const getTheme = (theme: string, color: string):any => {
  switch(theme) {
    case "blue":
      blueTheme["--primary-text-color"] = color;
      return blueTheme;
    case "dark":
      darkTheme["--primary-text-color"] = color;
      return darkTheme;
    case "green":
      greenTheme["--primary-text-color"] = color;
      return greenTheme;
    case "vermilion":
      vermilionTheme["--primary-text-color"] = color;
      return vermilionTheme;
  }
}

export const initTheme = (theme: any, color: string) => {
  document.documentElement.setAttribute("data-theme", theme);
  cssVars({
    watch: true, // 当添加，删除或修改其<link>或<style>元素的禁用或href属性时，ponyfill将自行调用
    variables: getTheme(theme, color), // variables 自定义属性名/值对的集合
    onlyLegacy: false, // false  默认将css变量编译为浏览器识别的css样式  true 当浏览器不支持css变量的时候将css变量编译为识别的css
  });
};